<template>
  <div>
    <el-card>
      <Category @getAttr="handleGetAttr"></Category>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-button type="primary" :icon="Plus">添加属性</el-button>
      <el-table border style="margin-top: 20px" max-height="600" :data="attrData">
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column label="属性名称" prop="attrName" width="120px"></el-table-column>
        <el-table-column label="属性值名称" prop="attrValueList">
          <template #default="{ row }">
            <el-tag v-for="tag in row.attrValueList" :key="tag.id" class="tag-item" type="primary">
              {{ tag.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template #default="{ row, $index }">
            <el-button type="primary" size="small" icon="Edit" @click="handleEdit(row)">
            </el-button>
            <el-popconfirm
              :title="`你确定删除${row.attrName}?`"
              width="200px"
              @confirm="deleteAttr(row.id)"
            >
              <template #reference>
                <el-button type="primary" size="small" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import Category from '@/components/Category.vue'
import { reqAttr } from '@/api/product/attr'

let attrData = ref()
const handleGetAttr = async (c1Id: number, c2Id: number, c3Id: number) => {
  let res = await reqAttr(c1Id, c2Id, c3Id)
  attrData.value = res.data
}

const handleEdit = async (row: Attr) => {}

const deleteAttr = async (attrId: number) => {}
</script>
<style scoped lang="scss"></style>
